<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div :id="idname" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
export default {
  props: {
    idname: {
      type: String,
      requied: true,
    },
    datalist: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      no_data_img: require("@/assets/images/no_data.png"),
      name: "",
      chart_data: [],
      chart_type: 2, //1  数据  2暂无
    };
  },
  watch: {
    datalist: {
      handler(val, oldVal) {
        this.handleData(val);
        this.chartColumn(this.chart_type);
      },
      deep: true,
    },
  },
  methods: {
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    chartColumn(type) {
      let dom = this.idname;
      let name = this.name;
      let data = this.chart_data;
      var rich = {
        name: {
          color: "#181818",
          fontSize: 14,
          padding: [1, 0],
          fontWeight: "400",
          align: "left",
        },
        percent: {
          color: "#03a98e",
          align: "right",
          fontSize: 12,
          fontWeight: "500",
          padding: [0, 2],
        },
        value: {
          color: "#181818",
          align: "right",
          fontSize: 14,
          fontWeight: "500",
        },
      };
      let option1 = {
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center",
            top: "50",
            bounding: "raw",
            style: {
              image: this.no_data_img,
              width: 92,
              opacity: 1,
            },
          },
        ],
      };
      let option2 = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          position: ["50%", "50%"],
          formatter: "{a} <br/>{b}: {c}",
        },
        grid: {
          top: 0,
        },

        series: [
          {
            // name: this.datalist.series.name,
            name: name,
            type: "pie",
            minAngle: 25,
            radius: [0, "70%"],
            color: ["#49dbc4", "#c0efe7", "#92c7bf"],
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#333",
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  return (
                    "{value|" +
                    params.value +
                    "}" +
                    "{percent|" +
                    "(" +
                    params.percent +
                    "%" +
                    ")" +
                    "}" +
                    "\n" +
                    "{name|" +
                    params.name +
                    "}"
                  );
                },
                rich: rich,
              },
            },
            // data: this.datalist.data,
            data: data,
          },

          // {
          //   // name: this.datalist.series.name,
          //   name: name,
          //   type: "pie",
          //   color: "#49dbc4",
          //   radius: [0, "70%"],
          //   label: {
          //     normal: {
          //       position: "inner",
          //       formatter: (params) => {
          //         return "{percent|" + params.percent.toFixed(0) + "%}";
          //       },
          //       // rich: rich,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       borderColor: "#fff",
          //       borderWidth: 3,
          //     },
          //     emphasis: {
          //       borderWidth: 0,
          //       shadowBlur: 5,
          //       shadowOffsetX: 0,
          //       shadowColor: "rgba(0, 0, 0, 0.5)",
          //     },
          //   },
          //   // data: this.datalist.data,
          //   data: data,
          // },
        ],
      };

      let option = type == 1 ? option2 : option1;
      this.drawLine(dom, option);
    },
    handleData(val) {
      let chart_data = [];
      if (val.count == 0) {
        this.chart_type = 2;
      } else {
        this.chart_type = 1;
      }
      switch (this.type) {
        case "user":
          chart_data = [
            { value: val.over_count, name: "已分拣" },
            { value: val.in_count, name: "部分分拣" },
            { value: val.up_count, name: "未分拣" },
          ];
          this.name = "用户分拣";
          this.chart_data = chart_data;
          break;
        case "goods":
          chart_data = [
            { value: val.over_count, name: "已分拣" },
            { value: val.in_count, name: "部分分拣" },
            { value: val.up_count, name: "未分拣" },
          ];
          this.name = "商品分拣";
          this.chart_data = chart_data;
          break;
        case "order":
          chart_data = [
            { value: val.over_count, name: "已分拣" },
            { value: val.in_count, name: "部分分拣" },
            { value: val.up_count, name: "未分拣" },
          ];
          this.name = "订单分拣";
          this.chart_data = chart_data;
          break;

        case "sort":
          let no_work = val.count - val.over_count;
          chart_data = [
            { value: val.over_count, name: "已出勤" },
            { value: no_work, name: "未出勤" },
          ];
          this.name = "分拣员出勤";
          this.chart_data = chart_data;
          break;
        case "order_list_que":
          chart_data = [
            { value: val.count, name: "商品总数量" },
            { value: val.over_count, name: "缺货商品数量" },
          ];
          this.name = "商品占比";
          this.chart_data = chart_data;
          break;

        default:
          break;
      }
    },
  },
  mounted() {
    this.chartColumn(this.chart_type);
  },
  created() {},
};
</script>

<style></style>
